<!DOCTYPE html>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>支付宝支付任务查询页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/public.css">
<link href="${contextPath}/css/jquery-ui.min.css" rel="stylesheet">
<link href="${contextPath}/css/jquery-ui.theme.min.css" rel="stylesheet">
<style type="text/css">
	.input-group-addon,.form-control{padding:6px;}
	.ui-datepicker .ui-datepicker-title select{color:#1c94c4}
	.form-btn1{height: 50px;float: left;}
</style>
<script type="text/javascript" src="${contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${contextPath}/js/common.js"></script>
<script type="text/javascript" src="${contextPath}/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="${contextPath}/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="${contextPath}/js/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="${contextPath}/js/jquery.ui.datepicker-ch.js"></script>
</head>
<body>
	<div class="container" style="max-width: 1366px">
		<!-- ----------------------------------------------支付宝支付列表--------------------------------------------------- -->
		<div class="tab-pane" id="alipayInfoList">
			<div class="panel panel-default">
				<div class="panel-heading" style="height: 38px;">
					<div style="float: left;">支付宝支付列表</div>
					<div style="float: right; color: green;">
						当前页成功支付金额:<span id="pageSalary"></span>元&nbsp;&nbsp;总成功支付金额:<span id="totleSalary"></span>元
					</div>
				</div>
				<div class="panel-body">
					<form class="form-inline" role="form">
						<div class="col-xs-2" style="width: 140px;">
							<div class="form-group">
								<div class="input-group" style="width: 135px;">
									<div class="input-group-addon">起始</div>
									<input class="form-control" onkeydown="if(event.keyCode==13){return false;}" id="alipayBeginDate" type="text" placeholder="起始时间">
								</div>
							</div>
						</div>
						<div class="col-xs-2" style="width: 140px;">
							<div class="form-group">
								<div class="input-group" style="width: 135px;">
									<div class="input-group-addon">截止</div>
									<input class="form-control" onkeydown="if(event.keyCode==13){return false;}" id="alipayEndDate" type="text" placeholder="截止时间">
								</div>
							</div>
						</div>
						<div class="col-xs-2" style="width: 101px;">
							<div class="form-group">
								<div class="input-group" style="width: 96px;">
									<div class="input-group-addon">类别</div>
									<select class="form-control" id="alipayDateTypeCheck">
										<option value="1">日</option>
										<option value="2" selected="selected">月</option>
										<option value="3">年</option>
									</select>
								</div>
							</div>
						</div>
						<div class="col-xs-2" style="width: 120px;">
							<div class="form-group">
								<div class="input-group" style="width: 110px;">
									<div class="input-group-addon">状态</div>
									<select class="form-control" id="alipayStatus">
										<option value="9" selected="selected">全部</option>
										<option value="1">成功</option>
										<option value="0">失败</option>
									</select>
								</div>
							</div>
						</div>
						<div class="btn2" style="float: right;">
							<button type="button" id="alipaySearchBtn" class="btn btn-default">查询</button>
						</div>
					</form>
					<div style="clear: both;"></div>
				</div>
				<table class="table table-striped table-bordered">
					<thead>
						<tr>
							<th width='4%'>序号</th>
							<th width='10%'>支付宝账号</th>
							<th width='12%'>收款人姓名</th>
							<th width='20%'>订单号</th>
							<th width='12%'>支付时间</th>
							<th width='7%'>金额(元)</th>
							<th width='5%'>状态</th>
							<th width='20%'>错误信息</th>
							<th width='10%'>平台查询码</th>
						</tr>
					</thead>
					<tbody id="alipayInfoList-tbody"></tbody>
				</table>
				<ul class="pagination"></ul>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		//支付宝列表条件
		var alipayBeginDate = "";
		var alipayEndDate = "";
		var alipayDateType = 2;
		var alipayStatus = 9;
		$(document).ready(function(){
			var date = new Date();
			var todayDate = $.datepicker.formatDate( "yy-mm-dd",new Date());
			alipayBeginDate = todayDate;
			alipayEndDate = todayDate;
			$("#alipayBeginDate,#alipayEndDate").val(todayDate);
			/*-------------------------------datepicker-----------------------------------------*/
			$.datepicker.regional[ "ch" ];
			$("#alipayBeginDate").datepicker({
				changeMonth:true,
				changeYear:true,
				numberOfMonths:1,
				setDate:todayDate,
				onClose: function( selectedDate ) {
					$( "#alipayEndDate" ).datepicker( "option", "minDate", selectedDate );
				}
			});
			$("#alipayEndDate").datepicker({
				changeMonth:true,
				changeYear:true,
				numberOfMonths:1,
				onClose: function( selectedDate ) {
					$( "#alipayBeginDate" ).datepicker( "option", "maxDate", selectedDate );
				}
			});	
			/*---------------------支付宝支付列表-----------------------------*/
			$("#alipaySearchBtn").click(function(){
				alipayBeginDate = $("#alipayBeginDate").val();
				alipayEndDate = $("#alipayEndDate").val();
				alipayDateType = $("#alipayDateTypeCheck").val();
				alipayStatus = $("#alipayStatus").val();
				queryAlipayList(1);
			});
		
		});
		/*------------------------------------------支付宝支付列表---------------------------------------*/
		queryAlipayList = function(pageNum){
			$.ajax({
				type:'POST',
				data:{"page":pageNum,"alipayBeginDate":alipayBeginDate,"alipayEndDate":alipayEndDate,"alipayDateType":alipayDateType,"alipayStatus":alipayStatus},
				url:'${contextPath}/security/queryAlipayListByWorker', 
				dataType:'json',
				success:function(data){
					$("#alipayInfoList-tbody").empty();			
					if(data.list == ""){
						$("#alipayInfoList-tbody").empty();
						$("#alipayInfoList .pageGoBtn").empty();
						$("#alipayInfoList-tbody").append("<tr class='text-danger'><td colspan='9'>无内容</td></tr>");
						$("#pageSalary").html(data.pageSalary);
						$("#totleSalary").html(data.totleSalary);
						var pageDom = $("#alipayInfoList .pagination");
						pageDom.empty();
					}else{
						pageTotal = data.totlePage; 
						$("#pageSalary").html(data.pageSalary);
						$("#totleSalary").html(data.totleSalary);
						$.each(data.list,function(i,item){
							var orderIdTD,payDateTD,isSuccessTD,TRcss,subMsgTD = "";
							if(item.orderId == null){
								orderIdTD = "<td>无</td>";
							}else{
								orderIdTD = "<td>"+item.orderId  +"</td>";
							}
							if(item.isSuccess){
								isSuccessTD = "<td>成功</td>";
								subMsgTD = "<td>无</td>";
							}else{
								isSuccessTD = "<td>失败</td>";
								TRcss = "style='color:red;'";
								subMsgTD = "<td>"+item.subMsg+"</td>";
							}
							$("#alipayInfoList-tbody").append(
							"<tr "+TRcss+">"+
								"<td>"+(i + 1)+"</td>"+
								"<td>"+item.payeeAccount+"</td>"+
								"<td>"+item.payeeRealName+"</td>"+
								orderIdTD+
								"<td>"+item.createDate+"</td>"+
								"<td>"+item.amount+"</td>"+ 
								isSuccessTD+
								subMsgTD+
								"<td><a target='_blank' href='${contextPath}/security/queryWorkerRecordByOutBizNo?outBizNo="+item.outBizNo+"'>"+item.outBizNo+"</a></td>"+
							"</tr>"		
							);		
						});
						var pageDom = $("#alipayInfoList .pagination");
						pageDom.empty();
						page.creatPageHTML(pageNum,pageTotal,pageDom,"queryAlipayList");
						/*--------------------------------------跳转页-------------------------------------------------------*/
						$("#alipayInfoList .pageGoBtn").click(function(){
							var pageNum = 0;
							pageNum = $("#alipayInfoList .pageGoText").val();
							if(pageNum !=0&&0<pageNum&&pageNum<pageTotal+1){
								queryAlipayList(pageNum);
							}
						});			
					}
				}
			});
		};
	</script>
</body>
</html>
